<template>
  <div class="WorkStation_container">
    <div class="WorkStation_container_left">
      <div class="left_header">
        <div class="left_header_left">欢迎回来，{{ userName }}</div>
        <div class="left_header_right">
          <a class="right_setting" @click="setupLeft">
            <svg-icon icon-class="设置" />
          </a>
        </div>
      </div>
      <div class="left_count">
        <div v-for="(item,index) in showStatisticsItem.filter(item=>item.isShow===true||item.isShow===undefined)" :key="index" class="left_count_item">
          <div class="left_count_item_left">
            <svg-icon :icon-class="item.icon" />
          </div>
          <div class="left_count_item_right">
            <div class="left_count_item_right_top">{{ statisticsData[item.dataKey] }}</div>
            <div class="left_count_item_right_bottom">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="left_TaskStatistics">
        <TaskStatistics />
      </div>
      <div class="left_bottom">
        <div class="left_bottom_left">
          <LocationDistribution v-if="showChartItem.length>=1&&showChartItem.filter(item => item.isShow)[0].component==='LocationDistribution'" />
          <MaintainPlanTimelinessRate v-if="showChartItem.length>=1&&showChartItem.filter(item => item.isShow)[0].component==='MaintainPlanTimelinessRate'" />
          <RepairTypeDistribution v-if="showChartItem.length>=1&&showChartItem.filter(item => item.isShow)[0].component==='RepairTypeDistribution'" />
          <DegreeDistribution v-if="showChartItem.length>=1&&showChartItem.filter(item => item.isShow)[0].component==='DegreeDistribution'" />
          <CheckPlanCompletedRatio v-if="showChartItem.length>=1&&showChartItem.filter(item => item.isShow)[0].component==='CheckPlanCompletedRatio'" />
          <MaintenanceCostStatistics v-if="showChartItem.length>=1&&showChartItem.filter(item => item.isShow)[0].component==='MaintenanceCostStatistics'" />
          <MachineHaltDuration v-if="showChartItem.length>=1&&showChartItem.filter(item => item.isShow)[0].component==='MachineHaltDuration'" />
          <SparePartsConsumptionRanking v-if="showChartItem.length>=1&&showChartItem.filter(item => item.isShow)[0].component==='SparePartsConsumptionRanking'" />
          <EquipmentStatusTodays v-if="showChartItem.filter(item => item.isShow)[0].component === 'EquipmentStatusTodays'" />
          <AlarmInformation v-if="showChartItem.filter(item => item.isShow)[0].component === 'AlarmInformation'" />
          <DetailInspectedToday v-if="showChartItem.filter(item => item.isShow)[0].component === 'DetailInspectedToday'" />
          <OEESequenceDiagram v-if="showChartItem.filter(item => item.isShow)[0].component === 'OEESequenceDiagram'" :target-number="OEENumber" />
          <OnDutyPersonnel v-if="showChartItem.filter(item => item.isShow)[0].component==='OnDutyPersonnel'" />
          <CapacityStatistics v-if="showChartItem.filter(item => item.isShow)[0].component === 'CapacityStatistics'" :target-number="capacityNumber" />
          <RankingFaultTimes v-if="showChartItem.filter(item => item.isShow)[0].component === 'RankingFaultTimes'" />
          <WorkshopEquipmentRealTime v-if="showChartItem.filter(item => item.isShow)[0].component === 'WorkshopEquipmentRealTime'" />
          <EquipmentUtilization v-if="showChartItem.filter(item => item.isShow)[0].component === 'EquipmentUtilization'" />
          <TaskStatistics v-if="showChartItem.filter(item => item.isShow)[0].component==='TaskStatistics'" />
          <DetailsMaintainMonth v-if="showChartItem.filter(item => item.isShow)[0].component==='DetailsMaintainMonth'" />
          <OverdueWorkOrder v-if="showChartItem.filter(item => item.isShow)[0].component==='OverdueWorkOrder'" />
          <WorkOrderDetailsInRepair v-if="showChartItem.filter(item => item.isShow)[0].component==='WorkOrderDetailsInRepair'" />

          <EquipmentPower v-if="showChartItem.filter(item => item.isShow)[0].component==='EquipmentPower'" :device-ids="(showChartItem.filter(item => item.component==='EquipmentPower'))[0].deviceIds" />
          <PowerDistribution v-if="showChartItem.filter(item => item.isShow)[0].component==='PowerDistribution'" />
          <ElectricityYearOnYear v-if="showChartItem.filter(item => item.isShow)[0].component==='ElectricityYearOnYear'" />
          <DailyElectricity v-if="showChartItem.filter(item => item.isShow)[0].component==='DailyElectricity'" :threshold="(showChartItem.filter(item => item.component==='DailyElectricity'))[0].threshold" />
          <EquipmentStatusStatistic v-if="showChartItem.filter(item => item.isShow)[0].component==='EquipmentStatusStatistic'" :device-ids="(showChartItem.filter(item => item.component==='EquipmentStatusStatistic'))[0].deviceIds" />
          <!-- 销售看板 -->
          <MaterialSalesRanking v-if="showChartItem.filter(item => item.isShow)[0].component=='MaterialSalesRanking'" />
          <saleSendWarning v-if="showChartItem.filter(item => item.isShow)[0].component=='saleSendWarning'" />
          <TimelyDeliveryRate v-if="showChartItem.filter(item => item.isShow)[0].component== 'TimelyDeliveryRate'" :target-number="deliveryNumber" />
          <!-- 采购看板 -->
          <purchaseDeliveryTimeWarning v-if="showChartItem.filter(item => item.isShow)[0].component=='purchaseDeliveryTimeWarning'" />
          <materialPurchaseSort v-if="showChartItem.filter(item => item.isShow)[0].component=='materialPurchaseSort'" />
          <consignmentTimely v-if="showChartItem.filter(item => item.isShow)[0].component=='consignmentTimely'" :target-number="consignmentNumber" />
          <!-- 仓库看板 -->
          <WarehouseInventoryProportion v-if="showChartItem.filter(item => item.isShow)[0].component=='WarehouseInventoryProportion'" />
          <MaterialClassificationInventory v-if="showChartItem.filter(item => item.isShow)[0].component=='MaterialClassificationInventory'" />
          <OverstockedMaterials v-if="showChartItem.filter(item => item.isShow)[0].component=='OverstockedMaterials'" />
          <LowstockedMaterials v-if="showChartItem.filter(item => item.isShow)[0].component=='LowstockedMaterials'" />
          <InboundOutboundNotifications v-if="showChartItem.filter(item => item.isShow)[0].component=='InboundOutboundNotifications'" :notice="noticeNumber" />
        </div>
        <div v-if="showChartItem.length>0&&showChartItem.filter(item => item.isShow).length>1" class="left_bottom_right">
          <LocationDistribution v-if="showChartItem.filter(item => item.isShow)[1].component==='LocationDistribution'" />
          <MaintainPlanTimelinessRate v-if="showChartItem.filter(item => item.isShow)[1].component==='MaintainPlanTimelinessRate'" />
          <RepairTypeDistribution v-if="showChartItem.filter(item => item.isShow)[1].component==='RepairTypeDistribution'" />
          <DegreeDistribution v-if="showChartItem.filter(item => item.isShow)[1].component==='DegreeDistribution'" />
          <CheckPlanCompletedRatio v-if="showChartItem.filter(item => item.isShow)[1].component==='CheckPlanCompletedRatio'" />
          <MaintenanceCostStatistics v-if="showChartItem.filter(item => item.isShow)[1].component==='MaintenanceCostStatistics'" />
          <MachineHaltDuration v-if="showChartItem.filter(item => item.isShow)[1].component==='MachineHaltDuration'" />
          <SparePartsConsumptionRanking v-if="showChartItem.filter(item => item.isShow)[1].component==='SparePartsConsumptionRanking'" />
          <EquipmentStatusTodays v-if="showChartItem.filter(item => item.isShow)[1].component === 'EquipmentStatusTodays'" />
          <AlarmInformation v-if="showChartItem.filter(item => item.isShow)[1].component === 'AlarmInformation'" />
          <DetailInspectedToday v-if="showChartItem.filter(item => item.isShow)[1].component === 'DetailInspectedToday'" />
          <OEESequenceDiagram v-if="showChartItem.filter(item => item.isShow)[1].component === 'OEESequenceDiagram'" :target-number="OEENumber" />
          <OnDutyPersonnel v-if="showChartItem.filter(item => item.isShow)[1].component==='OnDutyPersonnel'" />
          <CapacityStatistics v-if="showChartItem.filter(item => item.isShow)[1].component === 'CapacityStatistics'" :target-number="capacityNumber" />
          <RankingFaultTimes v-if="showChartItem.filter(item => item.isShow)[1].component === 'RankingFaultTimes'" />
          <WorkshopEquipmentRealTime v-if="showChartItem.filter(item => item.isShow)[1].component === 'WorkshopEquipmentRealTime'" />
          <EquipmentUtilization v-if="showChartItem.filter(item => item.isShow)[1].component === 'EquipmentUtilization'" />
          <TaskStatistics v-if="showChartItem.filter(item => item.isShow)[1].component==='TaskStatistics'" />
          <DetailsMaintainMonth v-if="showChartItem.filter(item => item.isShow)[1].component==='DetailsMaintainMonth'" />
          <OverdueWorkOrder v-if="showChartItem.filter(item => item.isShow)[1].component==='OverdueWorkOrder'" />
          <WorkOrderDetailsInRepair v-if="showChartItem.filter(item => item.isShow)[1].component==='WorkOrderDetailsInRepair'" />

          <EquipmentPower v-if="showChartItem.filter(item => item.isShow)[1].component==='EquipmentPower'" :device-ids="(showChartItem.filter(item => item.component==='EquipmentPower'))[0].deviceIds" />
          <PowerDistribution v-if="showChartItem.filter(item => item.isShow)[1].component==='PowerDistribution'" />
          <ElectricityYearOnYear v-if="showChartItem.filter(item => item.isShow)[1].component==='ElectricityYearOnYear'" />
          <MaintenanceHoursThisMonth v-if="showChartItem.filter(item => item.isShow)[1].component==='MaintenanceHoursThisMonth'" />
          <DailyElectricity v-if="showChartItem.filter(item => item.isShow)[1].component==='DailyElectricity'" :threshold="(showChartItem.filter(item => item.component==='DailyElectricity'))[0].threshold" />
          <EquipmentStatusStatistic v-if="showChartItem.filter(item => item.isShow)[1].component==='EquipmentStatusStatistic'" :device-ids="(showChartItem.filter(item => item.component==='EquipmentStatusStatistic'))[0].deviceIds" />
          <!-- 销售看板 -->
          <MaterialSalesRanking v-if="showChartItem.filter(item => item.isShow)[1].component=='MaterialSalesRanking'" />
          <saleSendWarning v-if="showChartItem.filter(item => item.isShow)[1].component=='saleSendWarning'" />
          <TimelyDeliveryRate v-if="showChartItem.filter(item => item.isShow)[1].component== 'TimelyDeliveryRate'" :target-number="deliveryNumber" />
          <!-- 采购看板 -->
          <purchaseDeliveryTimeWarning v-if="showChartItem.filter(item => item.isShow)[1].component=='purchaseDeliveryTimeWarning'" />
          <materialPurchaseSort v-if="showChartItem.filter(item => item.isShow)[1].component=='materialPurchaseSort'" />
          <consignmentTimely v-if="showChartItem.filter(item => item.isShow)[1].component=='consignmentTimely'" :target-number="consignmentNumber" />
          <!-- 仓库看板 -->
          <WarehouseInventoryProportion v-if="showChartItem.filter(item => item.isShow)[1].component=='WarehouseInventoryProportion'" />
          <MaterialClassificationInventory v-if="showChartItem.filter(item => item.isShow)[1].component=='MaterialClassificationInventory'" />
          <OverstockedMaterials v-if="showChartItem.filter(item => item.isShow)[1].component=='OverstockedMaterials'" />
          <LowstockedMaterials v-if="showChartItem.filter(item => item.isShow)[1].component=='LowstockedMaterials'" />
          <InboundOutboundNotifications v-if="showChartItem.filter(item => item.isShow)[1].component=='InboundOutboundNotifications'" :notice="noticeNumber" />

        </div>
      </div>

    </div>
    <div class="WorkStation_container_right">
      <div class="right_entrance">
        <div class="right_entrance_header">
          <div class="right_entrance_header_name">快捷入口</div>
          <a class="right_entrance_header_icon" @click="setupRight">
            <svg-icon icon-class="设置" />
          </a>
        </div>
        <div class="right_entrance_main">
          <div v-for="(item,index) in entranceData" :key="index" class="right_entrance_main_item">
            <a class="entrance_item" @click="gotoEntrance(item.component)">
              <div class="row_item_icon">
                <div class="row_item_icon_padding">
                  <svg-icon :icon-class="item.icon" />
                </div>
              </div>
              <div class="row_item_name">{{ item.name }}</div>
            </a>
          </div>

        </div>
      </div>
      <div class="right_public">
        <div class="right_public_header">
          <div class="right_public_header_name">公告</div>
          <div class="right_public_header_right">
            <a v-hasPermiHide="['system:notice:add']" class="right_public_header_new" @click="gotoNewNotice">
              + 发布新公告
            </a>
            <a class="right_public_header_icon" @click="gotoPublic">
              查看更多
            </a>
          </div>

        </div>
        <div class="right_public_main">

          <div v-for="(item,index) in messageData" id="itemContent" :key="index" ref="itemContent" class="right_public_main_item" @click="gotoNotice(item)">
            <el-tooltip v-jlink-tooltip-auto-show class="item" :content="item.noticeTitle" placement="top">
              <div class="item_content">{{ item.noticeTitle }}</div>
              <!-- <el-tooltip class="item" :content="item.noticeTitle" placement="top">
                <div class="item_content">{{ item.noticeTitle }}</div>
              </el-tooltip>
              </el-tooltip> -->
            </el-tooltip>
            <div v-if="item.isAdmin=='1'" class="item_admin">[系统推送]</div>
            <div v-else class="item_admin">[企业推送]</div>
          </div>
        </div>
      </div>
      <div class="right_help">

        <div class="right_help_header">
          <div class="right_help_header_name">帮助文档</div>
        </div>
        <div class="right_help_main">
          <a class="right_help_main_item" href="https://www.cascadeiot.com" target="_blank">官方网站</a>
          <!--          <a class="right_help_main_item">产品概述</a>-->
          <!--          <a class="right_help_main_item">使用指南</a>-->
          <!--          <a class="right_help_main_item">接入流程</a>-->
          <!--          <a class="right_help_main_item">接口文档</a>-->
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { messageEmptyV2 } from '@/api/backlogTask/backlogTask'
import ShowDetailOld from '@/views/system/notice/showDetail'
import ShowSystemDetailOld from '@/views/superManage/reportForm/superNotice/showDetail'
import { mapGetters } from 'vuex'
import { getPageSettings } from '@/api/common/common'
import { deviceHeadDate } from '@/api/equipmentManage/equipmentReport/dataBoard'
import { list as getMessage, getNotice } from '@/api/common/notification'
import TaskStatistics from './components/TaskStatistics'
import SetupEntrance from './components/SetupEntrance'
import Setup from './components/Setup'
import LocationDistribution from '../equipmentManage/equipmentReport/dataBoard/components/LocationDistribution.vue' // 设备位置分布
import MaintainPlanTimelinessRate from '../equipmentManage/equipmentReport/dataBoard/components/MaintainPlanTimelinessRate' // 保养计划及时率
import MachineHaltDuration from '../equipmentManage/equipmentReport/dataBoard/components/MachineHaltDuration' // 停机时间排行
import RepairTypeDistribution from '../equipmentManage/equipmentReport/dataBoard/components/RepairTypeDistribution' // 故障类型分布
import DegreeDistribution from '../equipmentManage/equipmentReport/dataBoard/components/EmergencyDegreeDistribution' // 设备紧急程度分布
import CheckPlanCompletedRatio from '../system/largeScreen/components/checkPlanFinishedRate.vue' // 点检计划完成率
import MaintenanceCostStatistics from '../equipmentManage/equipmentReport/dataBoard/components/MaintenanceCostStatistics'
import SparePartsConsumptionRanking from '../equipmentManage/equipmentReport/dataBoard/components/SparePartsConsumptionRanking'
import EquipmentStatusTodays from '../system/largeScreen/components/EquipmentStatusTodays.vue'
import AlarmInformation from '../system/largeScreen/components/AlarmInformation.vue'
import OEESequenceDiagram from '../system/largeScreen/components/OEESequenceDiagram.vue'
import OnDutyPersonnel from '../system/largeScreen/components/OnDutyPersonnel.vue'
import CapacityStatistics from '../system/largeScreen/components/CapacityStatistics.vue'
import RankingFaultTimes from '../system/largeScreen/components/RankingFaultTimes.vue'
import WorkshopEquipmentRealTime from '../system/largeScreen/components/WorkshopEquipmentRealTime.vue'
import EquipmentUtilization from '../system/largeScreen/components/EquipmentUtilization.vue'
import DetailInspectedToday from '../system/largeScreen/components/DetailInspectedToday.vue'
import DetailsMaintainMonth from '../system/largeScreen/components/DetailsMaintainMonth.vue'
import OverdueWorkOrder from '../system/largeScreen/components/OverdueWorkOrder.vue'
import WorkOrderDetailsInRepair from '../system/largeScreen/components/WorkOrderDetailsInRepair.vue'

import EquipmentPower from '@/views/system/largeScreen/components/EquipmentPower.vue' // 设备功率
import PowerDistribution from '@/views/system/largeScreen/components/PowerDistribution.vue' // 峰平谷电量
import ElectricityYearOnYear from '@/views/system/largeScreen/components/ElectricityYearOnYear.vue' // 电量同比分析
import DailyElectricity from '@/views/system/largeScreen/components/DailyElectricity.vue' // 日用电量趋势
import EquipmentStatusStatistic from '@/views/system/largeScreen/components/EquipmentStatusStatistic.vue' // 今日设备状态
import MaintenanceHoursThisMonth from '@/views/system/largeScreen/components/MaintenanceHoursThisMonth.vue'
import AddOrUpdate from '@/views/system/notice/addOrUpdate.vue'
import TimelyDeliveryRate from '@/views/saleManage/saleReport/saleBoard/components/TimelyDeliveryRate.vue'
import MaterialSalesRanking from '@/views/saleManage/saleReport/saleBoard/components/MaterialSalesRanking.vue'
import saleSendWarning from '@/views/saleManage/saleReport/saleBoard/components/saleSendWarning.vue'
import purchaseDeliveryTimeWarning from '@/views/purchaseManage/purchaseStatistics/purchaseBoard/components/purchaseDeliveryTimeWarning.vue'
import materialPurchaseSort from '@/views/purchaseManage/purchaseStatistics/purchaseBoard/components/materialPurchaseSort.vue'
import consignmentTimely from '@/views/purchaseManage/purchaseStatistics/purchaseBoard/components/consignmentTimely.vue'
import WarehouseInventoryProportion from '@/views/warehouseManagement/warehouseReport/warehouseSignage/components/WarehouseInventoryProportion.vue'
import MaterialClassificationInventory from '@/views/warehouseManagement/warehouseReport/warehouseSignage/components/MaterialClassificationInventory.vue'
import OverstockedMaterials from '@/views/warehouseManagement/warehouseReport/warehouseSignage/components/OverstockedMaterials.vue'
import LowstockedMaterials from '@/views/warehouseManagement/warehouseReport/warehouseSignage/components/LowstockedMaterials.vue'
import InboundOutboundNotifications from '@/views/warehouseManagement/warehouseReport/warehouseSignage/components/InboundOutboundNotifications.vue'
export default {
  name: 'WorkStation',
  computed: {
    ...mapGetters([
      'userId', 'userName', 'all_routes', 'companyId', 'notificationChangeTag'
    ])
  },
  components: {
    TaskStatistics, LocationDistribution, MaintainPlanTimelinessRate,
    MachineHaltDuration, RepairTypeDistribution, DegreeDistribution, CheckPlanCompletedRatio,
    MaintenanceCostStatistics, SparePartsConsumptionRanking,
    EquipmentStatusTodays,
    AlarmInformation,
    OEESequenceDiagram,
    OnDutyPersonnel,
    CapacityStatistics,
    RankingFaultTimes,
    WorkshopEquipmentRealTime,
    EquipmentUtilization,
    DetailInspectedToday,
    DetailsMaintainMonth,
    OverdueWorkOrder,
    WorkOrderDetailsInRepair,
    EquipmentPower,
    PowerDistribution,
    ElectricityYearOnYear,
    DailyElectricity,
    EquipmentStatusStatistic,
    MaintenanceHoursThisMonth,
    MaterialSalesRanking,
    saleSendWarning,
    TimelyDeliveryRate,
    purchaseDeliveryTimeWarning,
    materialPurchaseSort,
    consignmentTimely,
    WarehouseInventoryProportion,
    MaterialClassificationInventory,
    OverstockedMaterials,
    LowstockedMaterials,
    InboundOutboundNotifications
  }, // 组件注册
  watch: {
    notificationChangeTag() {
      setTimeout(() => {
        this.getMessageF()
      }, 500)
    }
  },
  data() {
    return {
      capacityNumber: 100,
      OEENumber: 100,
      deliveryNumber: 60,
      consignmentNumber: 60,
      noticeNumber: 24,
      id: '',
      entranceId: '',
      statisticsItem: [ // 可选的统计数据项
        { name: '设备总数', icon: '设备总数', dataKey: 'deviceTotalNumber', bgColor: '#FFC9C9', isShow: true },
        { name: '今日点检（含待点检）', icon: '今日待点检', dataKey: 'waitCheckNumber', bgColor: '#FFC9FB', isShow: true },
        { name: '本月待保养', icon: '本月待保养', dataKey: 'waitMaintainNumber', bgColor: '#D3C9FF', isShow: true },
        { name: '维修中设备数', icon: '维修中设备数', dataKey: 'repairNumber', bgColor: '#FFEBC9', isShow: true },
        { name: '安全库存报警', icon: '安全库存报警', dataKey: 'safetyStockAlarm', bgColor: '#C9FFE1', isShow: false },
        { name: '本月维修工时(h)', icon: '本月维修工时', dataKey: 'monthRepairTime', bgColor: '#C9EEFF', isShow: false },
        { name: '今日点检逾期数', icon: '今日点检超期数', dataKey: 'overdueCheckNumber', bgColor: '#C9EEFF', isShow: false },
        { name: '备件待盘点工单', icon: '待盘点工单', dataKey: 'waitSpareCheckNumber', bgColor: '#C9EEFF', isShow: false },
        { name: '维修工单', icon: '维修中工单', dataKey: 'repairRecordNumber', bgColor: '#C9EEFF', isShow: false },
        { name: '未完成销售订单', icon: '未完成销售订单', dataKey: 'unFinishSaleOrderSum', bgColor: '#C9EEFF4D', isShow: false },
        { name: '待发货单', icon: '发货单', dataKey: 'willDeliverSum', bgColor: '#FFEBC94D', isShow: false },
        { name: '本月销售退货单', icon: '退货单', dataKey: 'returnSum', bgColor: '#C9EEFF4D', isShow: false },
        { name: '本月销售逾期订单', icon: '逾期订单', dataKey: 'overdueSum', bgColor: '#FFC9C94D', isShow: false },
        { name: '本月采购订单', icon: '本月采购订单', dataKey: 'purchaseOrderNum', bgColor: '#C9EEFF4D', isShow: false },
        { name: '本月采购逾期订单', icon: '采购逾期工单', dataKey: 'overduePurchaseOrderNum', bgColor: '#FFC9C94D', isShow: false },
        { name: '本月采购退货单', icon: '采购退货工单', dataKey: 'returnPurchaseOrderNum', bgColor: '#C9EEFF4D', isShow: false },
        { name: '采购待检验', icon: '来料待检验单', dataKey: 'inspectPurseOrderNum', bgColor: '#FFEBC94D', isShow: false },
        { name: '物料总数', icon: '物料总数', dataKey: 'materialCount', bgColor: '#01698E4D', isShow: false },
        { name: '待入库单', icon: '待入库单', dataKey: 'waitIn', bgColor: '#D77E004D', isShow: false },
        { name: '待出库单', icon: '待出库单', dataKey: 'waitOut', bgColor: '#D77E004D', isShow: false },
        { name: '待盘点单', icon: '待盘点单', dataKey: 'waitCheck', bgColor: '#D77E004D', isShow: false },
        { name: '超储物料数量', icon: '超储物料数量', dataKey: 'overStorage', bgColor: '#DC5B5A4D', isShow: false },
        { name: '低储物料数量', icon: '低储物料数量', dataKey: 'lowStorage', bgColor: '#0099974D', isShow: false }
      ],
      chartItem: [// 可选的图表项
        { name: '设备紧急程度分布', component: 'DegreeDistribution', isShow: true },
        { name: '点检计划完成率', component: 'CheckPlanCompletedRatio', isShow: true },
        { name: '维修费用统计', component: 'MaintenanceCostStatistics', isShow: false },
        { name: '备件消耗排行', component: 'SparePartsConsumptionRanking', isShow: false },
        { name: '设备位置分布', component: 'LocationDistribution', isShow: false },
        { name: '保养计划及时率', component: 'MaintainPlanTimelinessRate', isShow: false },
        // { name: '停机时间排行', component: 'MachineHaltDuration', isShow: false },
        { name: '故障类型分布', component: 'RepairTypeDistribution', isShow: false },
        { name: '报警信息', component: 'AlarmInformation', isShow: false },
        { name: '产能统计', component: 'CapacityStatistics', number: 100, isShow: false },
        { name: '今日点检明细', component: 'DetailInspectedToday', isShow: false },
        { name: '本月待保养明细', component: 'DetailsMaintainMonth', isShow: false },
        { name: '设备状态统计', component: 'EquipmentStatusTodays', isShow: false },
        { name: '设备利用率', component: 'EquipmentUtilization', isShow: false },
        { name: 'OEE时序图', component: 'OEESequenceDiagram', number: 100, isShow: false },
        { name: '已逾期工单', component: 'OverdueWorkOrder', isShow: false },
        { name: '维修工单明细', component: 'WorkOrderDetailsInRepair', isShow: false },
        { isShow: false, name: '设备故障占比', component: 'MaintenanceHoursThisMonth' },
        { isShow: '0', name: '设备功率', component: 'EquipmentPower', deviceIds: '' },
        { isShow: '0', name: '峰平谷电量', component: 'PowerDistribution' },
        { isShow: '0', name: '电量同比分析', component: 'ElectricityYearOnYear' },
        { isShow: '0', name: '今日设备状态', component: 'EquipmentStatusStatistic', deviceIds: '' },
        { isShow: '0', name: '日用电量趋势', component: 'DailyElectricity', threshold: 0 },
        { name: '物料销售排行', component: 'MaterialSalesRanking', isShow: false },
        { name: '发货及时率', component: 'TimelyDeliveryRate', number: 60, isWarning: true, isShow: false },
        // { name: '销售发货预警', component: 'saleSendWarning', length: '2', isShow: false },
        { name: '物料采购排行', component: 'materialPurchaseSort', isShow: false },
        { name: '交货及时率', component: 'consignmentTimely', number: 60, isWarning: true, isShow: false },
        // { name: '采购交期预警', component: 'purchaseDeliveryTimeWarning', length: '2', isShow: false },
        { name: '仓库库存占比', component: 'WarehouseInventoryProportion', isShow: false },
        { name: '物料分类库存占比', component: 'MaterialClassificationInventory', isShow: false },
        { name: '超储物料明细', component: 'OverstockedMaterials', isShow: false },
        { name: '低储物料明细', component: 'LowstockedMaterials', isShow: false }
        // { name: '出入库通知', component: 'InboundOutboundNotifications', length: 2, notice: 24, isShow: false }
      ],
      entranceData: [], // 快捷入口的数据
      defaultEntranceName: ['checkRecord', 'maintainRecord', 'equipmentReportRepair', 'repairRecord', 'sparePartsTakeStock', 'sparePartsStock'],
      statisticsData: {},
      messageData: [],
      pageId: '工作台',
      showStatisticsItem: [], // 真正展示的统计数据项
      showChartItem: [] // 真正展示的图表项
    }
  },
  mounted() {
    this.getStatisticsData()
    this.getPageSettings()
    this.getPageSettingsEntrance()
    this.getMessageF() // 获取公告数据
  },
  methods: {
    setupLeft() {
      // 遍历 chartItem ，如果有新加的 chartItem，但是之前保存的showChartItem 里没有 ，那么它也要传到设置页，不然设置页看不到
      const cacheChartItem = this.$deepClone(this.showChartItem)
      this.chartItem.forEach(item => {
        if (!this.showChartItem.some(item2 => item2.component == item.component)) {
          cacheChartItem.push(item)
        }
      })
      // statisticsItem 也一样
      const cacheStatisticsItem = this.$deepClone(this.showStatisticsItem)
      this.statisticsItem.forEach(item => {
        if (!this.showStatisticsItem.some(item2 => item2.dataKey == item.dataKey)) {
          cacheStatisticsItem.push(item)
        }
      })
      this.$layer.iframe({
        // 弹框
        content: {
          content: Setup, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            settingData: {
              StatisticsItem: cacheStatisticsItem, // 显示设置的数据
              ChartItem: cacheChartItem, // 字段搜索的数据
              id: this.id,
              pageId: '工作台看板' // 页面唯一标识
            }
          } // props
        },
        area: ['660px', '800px'],
        title: '工作台看板设置', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    setupRight() {
      this.$layer.iframe({
        // 弹框
        content: {
          content: SetupEntrance, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            settingData: {
              id: this.entranceId,
              pageId: '快捷入口设置', // 页面唯一标识
              data: this.entranceData
            }
          } // props
        },
        area: ['660px', '800px'],
        title: '快捷入口设置', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    gotoPublic() {
      this.$store.state.notification.notificationStatus = '公告'
      this.$router.push(`/backlogTask`)
    },
    gotoNotice(row) {
      console.log(row)
      messageEmptyV2({ ids: row.id }).then(res => {
        if (row.title == '企业公告') {
          this.$layer.iframe({// 弹框
            content: {
              content: ShowDetailOld, // 传递的组件对象
              parent: this, // 当前的vue对象
              data: {
                id: row.contentId
              }// props
            },
            area: ['880px', '820px'],
            title: '公告详情', // 标题
            shadeClose: false // 点击遮罩是否关闭
          })
        } else {
          this.$layer.iframe({// 弹框
            content: {
              content: ShowSystemDetailOld, // 传递的组件对象
              parent: this, // 当前的vue对象
              data: {
                id: row.contentId
              }// props
            },
            area: ['880px', '820px'],
            title: '查看系统公告', // 标题
            shadeClose: false // 点击遮罩是否关闭
          })
        }
      })
    },
    gotoNewNotice() {
      this.$layer.iframe({// 弹框
        content: {
          content: AddOrUpdate, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
          }// props
        },
        area: ['1320px', '900px'],
        title: '发布企业公告', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    gotoEntrance(component) {
      console.log(component)
      if (component == 'equipmentManage/equipmentRepair/repairRecord') {
        const routeData = {
          statusPc: [4, 0]
        }
        // 查询参数存入 vuex
        this.$store.state.common.routeData = routeData
      }
      this.$router.push(`/` + component)
    },
    // 获取顶部统计数据
    getStatisticsData() {
      deviceHeadDate().then(res => {
        this.statisticsData = res.data
      })
    },
    getPageSettings() {
      getPageSettings({ userId: this.userId, pageId: '工作台看板' }).then(res => {
        if (res.data.json) {
          const pageSetings = res.data.json

          this.showStatisticsItem = pageSetings.StatisticsItem
          this.showChartItem = pageSetings.ChartItem
          this.id = res.data.id
        } else {
          this.showStatisticsItem = this.$deepClone(this.statisticsItem)
          this.showChartItem = this.$deepClone(this.chartItem)
        }
        if (this.showChartItem.filter(item => item.component == 'OEESequenceDiagram').length > 0) {
          this.OEENumber = Number(this.showChartItem.filter(item => item.component == 'OEESequenceDiagram')[0].number)
        }
        if (this.showChartItem.filter(item => item.component == 'CapacityStatistics').length > 0) {
          this.capacityNumber = Number(this.showChartItem.filter(item => item.component == 'CapacityStatistics')[0].number)
        }
        if (this.showChartItem.filter(item => item.component == 'TimelyDeliveryRate').length > 0) {
          this.deliveryNumber = Number(this.showChartItem.filter(item => item.component == 'TimelyDeliveryRate')[0].number)
        }
        if (this.showChartItem.filter(item => item.component == 'consignmentTimely').length > 0) {
          this.consignmentNumber = Number(this.showChartItem.filter(item => item.component == 'consignmentTimely')[0].number)
        }
        if (this.showChartItem.filter(item => item.component == 'InboundOutboundNotifications').length > 0) {
          this.noticeNumber = Number(this.showChartItem.filter(item => item.component == 'InboundOutboundNotifications')[0].notice)
        }
        // this.OEENumber = this.showChartItem.filter(item => item.component === 'OEESequenceDiagram')[0].number
        // this.capacityNumber = this.showChartItem.filter(item => item.component === 'CapacityStatistics')[0].number
      })
    },
    getPageSettingsEntrance() {
      getPageSettings({ userId: this.userId, pageId: '快捷入口设置' }).then(res => {
        if (res.data.json) {
          console.log(22222222)
          const pageSetings = res.data.json
          this.entranceData = pageSetings.data
          this.entranceId = res.data.id
        } else {
          this.getDefaultEntrance()
        }
      })
    },
    getMessageF() {
      getNotice(this.companyId).then(res => {
        this.messageData = res.data
      })
    },
    getDefaultEntrance() { // 获取默认的快捷入口
      const allRoutes = this.$deepClone(this.all_routes)
      const res = []
      this.getMatchRoutes(allRoutes, res)
      this.entranceData = res
    },
    getMatchRoutes(route, res) { // 递归获取匹配的路由
      route.forEach(item => {
        if (item.children) {
          this.getMatchRoutes(item.children, res)
        } else {
          if (this.defaultEntranceName.indexOf(item.path) !== -1) {
            item.name = item.meta.title
            item.icon = item.meta.icon
            res.push(item)
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.WorkStation_container{
  width: 100%;
  height: 100%;
  padding: 2.2%;
  display: flex;
  //background-color: #5a5e66;
  .WorkStation_container_left{
    background-color: white;
    width: 76.5%;
    border-radius: 4px;
    display: flex;flex-direction: column;height: 100%;
    .left_header{
      display: flex;justify-content: space-between;height: 50px;
      border-bottom: 1px solid rgba(151, 151, 151, 0.2);
      .left_header_left{
        height: 100%;
        margin-left: 3%;
        font-size: 14px;
        color: #333333;
        display: flex;justify-content: center;align-items: center;
      }
      .left_header_right{
        height: 100%;
        margin-right: 1.5%;
        display: flex;justify-content: center;align-items: center;
        .right_setting{
          font-size: 20px;
        }
      }
    }
    .left_count{
      display: flex;
      border-bottom: 1px solid rgba(151, 151, 151, 0.2);
      height: 13%;
      .left_count_item{
        position: relative;
        width: 25%;
        padding: 0px 3%;
        //background-color: #1c2836;
        height: 100%;
        display: flex;align-items: center;justify-content: space-between;
        .left_count_item_left{
          width: 56px;
          height: 56px;
          border-radius: 50%;
          background-color: rgba(246, 246, 246, 1);
          display: flex;justify-content: center;align-items: center;
          font-size: 26px;
        }
        .left_count_item_right{
          margin-left: 6%;
          height: 100%;
          .left_count_item_right_top{
            height: 55%;justify-content: flex-end;
            display: flex;;align-items: flex-end;
            color: #333333; font-size: 36px;
          }
          .left_count_item_right_bottom{
            height: 42%;justify-content: flex-end;
            color: #999999; font-size: 16px;
            width: 160px;
            text-align: right;
            overflow:hidden; //超出的文本隐藏
            text-overflow:ellipsis; //溢出用省略号显示
            white-space:nowrap; //溢出不换行
          }
        }
      }
      .left_count_item:not(:last-child)::after{
        content: "";
        position: absolute;
        height: 50%;
        width: 1px;
        background: rgba(151, 151, 151, 0.3);
        right: 0;
        top: 25%;
      }
    }

    .left_TaskStatistics{
      height: 40%;
      border-bottom: 1px solid rgba(151, 151, 151, 0.2);
    }
    .left_bottom{
      display: flex;height: 45%;
      //height: 45%;

      .left_bottom_left{
        height: 100%;
        width: 50%;
        border-right: 1px solid rgba(151, 151, 151, 0.2);
      }
      .left_bottom_right{
        height: 100%;
        width: 50%;
      }
    }

  }
  .WorkStation_container_right{
    width: 23.5%;height: 100%;
    padding-left: 1.1%;
    display: flex;flex-direction: column;
    .right_entrance{
      height: 33%;
      background-color: white;
      display: flex;flex-direction: column;
      border-radius: 4px;
      .right_entrance_header{
        display: flex;justify-content: space-between;
        border-bottom: 1px solid rgba(151, 151, 151, 0.2);
        height: 50px;
        .right_entrance_header_name{
          height: 100%;
          margin-left: 5.1%;
          font-size: 20px;
          color: #333333;
          font-weight: bold;
          display: flex;justify-content: center;align-items: center;
        }
        .right_entrance_header_icon{
          height: 100%;
          margin-right: 5.1%;
          display: flex;justify-content: center;align-items: center;
          font-size: 20px;
        }
      }
      .right_entrance_main{
        flex: 1;height: 69%;
        display: flex;
        flex-wrap: wrap;
        padding: 2% 0;
        .right_entrance_main_item{
          width: 33.33%;
          height: 50%;
          display: flex;justify-content: center;align-items: center;
          .entrance_item{
            .row_item_icon{
              display: flex;justify-content: center;align-items: center;
              .row_item_icon_padding{
                width: 40px;
                height: 40px;
                display: flex;justify-content: center;align-items: center;
                background-color: rgba(211, 234, 255, 0.5);
                font-size: 20px;
                border-radius: 7px;
                color: rgba(53, 119, 226, 1);
              }
            }
            .row_item_name{
              color: rgba(153, 153, 153, 1);
              height: 25px;font-size: 16px;
              display: flex;justify-content: center;align-items: center;
              white-space:nowrap;
            }

          }
          .entrance_item:hover .row_item_icon_padding{
            background-color: rgba(211, 234, 255, 1);;
          }
        }

      }
    }
    .right_public{
      height: 43.4%;
      background-color: white;
      margin-top: 4%;
      border-radius: 4px;
      display: flex;flex-direction: column;

      .right_public_header{
        display: flex;justify-content: space-between;
        height: 50px;
        .right_public_header_name{
          height: 100%;
          margin-left: 5.1%;
          font-size: 20px;
          color: #333333;
          font-weight: bold;
          display: flex;justify-content: center;align-items: center;
        }
        .right_public_header_right{
          display: flex;justify-content: center;align-items: center;
          margin-right: 5.1%;
        }
        .right_public_header_icon{
          height: 100%;
          display: flex;justify-content: flex-end;align-items: center;
          font-size: 14px;
          width: 60px;
        }
        .right_public_header_new{
          color: #397DFE;
          height: 100%;
          margin-right: 10px;
          display: flex;justify-content: flex-end;align-items: center;
          font-size: 16px;
          width: 100px;
        }
      }
      .right_public_main{
        padding: 0px 5.1%;;
        margin-bottom: 3.5%;
        height: 84.3%;
        .right_public_main_item{
          cursor:pointer;
          display: flex;align-items: center;justify-content: space-between;
          margin-top: 1%;
          width: 100%;
          // width: 380px;
          height: 15.5%;
          border-bottom: 1px solid rgba(0,0,0,0.05);
          .item_content{
            // width: 220px !important;
            //width: calc(100% - 95px);
            flex: 2;
            line-height: 100%;
            padding-left: 0;
            font-size: 16px;
            color: #666666;
            overflow:hidden; //超出的文本隐藏
            text-overflow:ellipsis; //溢出用省略号显示
            white-space:nowrap; //溢出不换行
          }
          .item_admin{
            width: 95px;text-align: right;color: green;font-size: 16px;
          }
        }
        .right_public_main_item:last-child{
          //margin-top: 10px;
          border-bottom: 0;
        }
      }
    }
    .right_help{
      flex: 1;
      background-color: white;
      margin-top: 4%;
      border-radius: 4px;
      display: flex;flex-direction: column;
      .right_help_header{
        display: flex;justify-content: space-between;
        .right_help_header_name{
          height: 50px;
          margin-left: 20px;
          font-size: 20px;
          color: #333333;
          font-weight: bold;
          display: flex;justify-content: center;align-items: center;
        }
      }
      .right_help_main{
        display: flex;flex-wrap: wrap;width: 100%;
        padding: 0px 20px;
        .right_help_main_item{
          margin-right: 20px;
          font-size: 18px;
          color: #666666;
        }
      }
    }
  }
}
</style>

